<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="130px"
      v-loading="formLoading"
    >
      <el-form-item label="所属部门" prop="depId">
        <el-tree-select
          v-model="formData.depId"
          :data="deptTree"
          :props="defaultProps"
          check-strictly
          default-expand-all
          placeholder="请选择上级部门"
          value-key="deptId"
          clearable
        />
      </el-form-item>
      <el-form-item label="职位序列" prop="seqId">
        <el-select
          v-model="formData.seqId"
          placeholder="请选择职位序列"
          clearable
        >
          <el-option
            v-for="dict in list2"
            :key="dict.id"
            :label="dict.seqName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职位" prop="posId">
        <el-select
          v-model="formData.posId"
          placeholder="请选择职位"
          clearable
        >
          <el-option
            v-for="dict in list3"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="empType">
        <el-select v-model="formData.empType" placeholder="请选择类型">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.EMP_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="empName">
        <el-input v-model="formData.empName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="工号" prop="empNo">
        <el-input v-model="formData.empNo" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="formData.mobile" placeholder="请输入手机" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生日" prop="birthDate">
        <el-date-picker
          v-model="formData.birthDate"
          type="date"
          value-format="x"
          placeholder="选择生日"
        />
      </el-form-item>
      <el-form-item label="身份证号" prop="idNo">
        <el-input v-model="formData.idNo" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicalStatus">
        <!-- <el-radio-group v-model="formData.politicalStatus">
          <el-radio value="1">请选择字典生成</el-radio>
        </el-radio-group> -->
        <el-input v-model="formData.politicalStatus" placeholder="请输入政治面貌" />
      </el-form-item>
      <el-form-item label="民族" prop="ethnicity">
        <el-input v-model="formData.ethnicity" placeholder="请输入民族" />
      </el-form-item>
      <el-form-item label="婚姻状况" prop="maritalStatus">
        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.MARITAL_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="籍贯" prop="hometown">
        <el-input v-model="formData.hometown" placeholder="请输入籍贯" />
      </el-form-item>
      <el-form-item label="英语等级" prop="englishLevel">
        <el-input v-model="formData.englishLevel" placeholder="请输入英语等级" />
      </el-form-item>
      <el-form-item label="校外工作起始日期" prop="externalDate">
        <el-date-picker
          v-model="formData.externalDate"
          type="date"
          value-format="x"
          placeholder="选择校外工作起始日期"
        />
      </el-form-item>
      <el-form-item label="入职时间" prop="collegeEntryDate">
        <el-date-picker
          v-model="formData.collegeEntryDate"
          type="date"
          value-format="x"
          placeholder="选择学院入职时间"
        />
      </el-form-item>
      <el-form-item label="身份证地址" prop="idAddress">
        <el-input v-model="formData.idAddress" placeholder="请输入身份证地址" />
      </el-form-item>
      <el-form-item label="现家庭地址" prop="homeAddress">
        <el-input v-model="formData.homeAddress" placeholder="请输入现家庭地址" />
      </el-form-item>
      <el-form-item label="教师资格证" prop="teacherCert">
        <el-select v-model="formData.teacherCert" placeholder="请选择教师资格证">
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.TEACHER_CERT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资格证编号" prop="teacherCertNo">
        <el-input v-model="formData.teacherCertNo" placeholder="请输入资格证编号" />
      </el-form-item>
      <el-form-item label="银行卡号" prop="bankCardNumber">
        <el-input v-model="formData.bankCardNumber" placeholder="请输入银行卡号" />
      </el-form-item>
      <el-form-item label="紧急联系人" prop="emergencyContact">
        <el-input v-model="formData.emergencyContact" placeholder="请输入紧急联系人" />
      </el-form-item>
      <el-form-item label="与紧急联系人关系" prop="contactRelationship">
        <el-input v-model="formData.contactRelationship" placeholder="请输入与紧急联系人关系" />
      </el-form-item>
      <el-form-item label="紧急联系人电话" prop="emergencyPhone">
        <el-input v-model="formData.emergencyPhone" placeholder="请输入紧急联系人电话" />
      </el-form-item>
      <el-form-item label="身份标记" prop="typeFlag">
        <el-select
          v-model="formData.typeFlag"
          placeholder="请选择身份标记"
          clearable
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.TYPE_FLAG)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态标记" prop="statusFlag">
        <el-select
          v-model="formData.statusFlag"
          placeholder="请选择状态标记"
          clearable
        >
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.STATUS_FLAG)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input v-model="formData.remarks" placeholder="请输入备注信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { EmployeeInfoApi, EmployeeInfoVO } from '@/api/pm/employeeinfo'
import { PositionsSeqApi, PositionsSeqVO } from '@/api/pm/positionsseq'
import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
import * as PostApi from '@/api/system/post'

/** 职工信息 表单 */
defineOptions({ name: 'EmployeeInfoForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  depId: undefined,
  seqId: undefined,
  posId: undefined,
  empType: undefined,
  empName: undefined,
  empNo: undefined,
  mobile: undefined,
  gender: undefined,
  birthDate: undefined,
  idNo: undefined,
  politicalStatus: undefined,
  ethnicity: undefined,
  maritalStatus: undefined,
  hometown: undefined,
  englishLevel: undefined,
  externalDate: undefined,
  collegeEntryDate: undefined,
  idAddress: undefined,
  homeAddress: undefined,
  teacherCert: undefined,
  teacherCertNo: undefined,
  bankCardNumber: undefined,
  emergencyContact: undefined,
  contactRelationship: undefined,
  emergencyPhone: undefined,
  typeFlag: undefined,
  statusFlag: undefined,
  remarks: undefined,
})
const formRules = reactive({
  englishLevel: [{ required: true, message: '英语等级不能为空', trigger: 'blur' }],
  idAddress: [{ required: true, message: '身份证地址不能为空', trigger: 'blur' }],
  collegeEntryDate: [{ required: true, message: '学院入职时间不能为空', trigger: 'blur' }],
  homeAddress: [{ required: true, message: '现家庭地址不能为空', trigger: 'blur' }],
  empName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await EmployeeInfoApi.getEmployeeInfo(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as EmployeeInfoVO
    if (formType.value === 'create') {
      await EmployeeInfoApi.createEmployeeInfo(data)
      message.success(t('common.createSuccess'))
    } else {
      await EmployeeInfoApi.updateEmployeeInfo(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    depId: undefined,
    seqId: undefined,
    posId: undefined,
    empType: undefined,
    empName: undefined,
    empNo: undefined,
    mobile: undefined,
    gender: undefined,
    birthDate: undefined,
    idNo: undefined,
    politicalStatus: undefined,
    ethnicity: undefined,
    maritalStatus: undefined,
    hometown: undefined,
    englishLevel: undefined,
    externalDate: undefined,
    collegeEntryDate: undefined,
    idAddress: undefined,
    homeAddress: undefined,
    teacherCert: undefined,
    teacherCertNo: undefined,
    bankCardNumber: undefined,
    emergencyContact: undefined,
    contactRelationship: undefined,
    emergencyPhone: undefined,
    typeFlag: undefined,
    statusFlag: undefined,
    remarks: undefined,
  }
  formRef.value?.resetFields()
}
const queryParams2 = reactive({
  pageNo: 1,
  pageSize: 10,
  seqName: undefined,
  seqDec: undefined,
  createTime: [],
  remarks: undefined,
})
const list2 = ref<PositionsSeqVO[]>([]) // 列表的数据
/** 查询列表 */
const getList2 = async () => {
  try {
    const data = await PositionsSeqApi.getPositionsSeqPage(queryParams2)
    list2.value = data.list
  } finally {
  }
}
/** 初始化 **/
onMounted(() => {
  getList2()
  getList3()
  getTree()
})


const deptTree = ref() // 树形结构
/** 获得部门树 */
const getTree = async () => {
  deptTree.value = []
  const data = await DeptApi.getSimpleDeptList()
  let dept: Tree = { id: 0, name: '顶级部门', children: [] }
  dept.children = handleTree(data)
  deptTree.value.push(dept)
}

const list3 = ref() // 列表的数据
const queryParams3 = reactive({
  pageNo: 1,
  pageSize: 10,
  code: '',
  name: '',
  status: undefined
})
/** 查询岗位列表 */
const getList3 = async () => {
  try {
    const data = await PostApi.getPostPage(queryParams3)
    list3.value = data.list
  } finally {
  }
}
</script>